<template>
  <div class="AuthField">
    <a-table
      size="small"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{text, record, index, column}">
        <div class="" v-if="column.dataIndex == 'row'">
          <a-checkbox
            v-model:checked="record.rowCheck"
            @change="rowCheckChange"
          ></a-checkbox>
        </div>
        <div class="" v-if="column.dataIndex == 'col'">
          <a-checkbox
            v-model:checked="record.colCheck"
            @change="colCheckChange"
          ></a-checkbox>
        </div>
        <div class="" v-if="column.dataIndex == 'clear'">
          <a-select
            @change="processorTypeChange"
            allow-clear
            v-model:value="record.processorType"
            style="width: 100%"
            placeholder="请选择"
          >
            <a-select-option
              :value="Number(item.code)"
              :key="index"
              v-for="(item, index) in getDicValue('field_processor')"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {
  builderTableColumnSimpleList,
  securityFieldGetRowProperty,
  securityFieldGetColProperty,
  assignRowProperty,
  assignColProperty,
  assignProcessorProperty,
  getProcessorProperty
} from "@/api/configCenter/platform/dataResource";
import {getDicValue} from "@/utils/common";

const props = defineProps({
  pageSet: {
    type: Object,
    default: {}
  }
});

const tableLoading = ref(false);
const tableData = ref([]);
const tableDataForBackup = ref([]);

const loadPagination = () => {
  tableLoading.value = true;
  builderTableColumnSimpleList(props.pageSet)
    .then((res) => {
      res.data.forEach((item: any) => {
        item.rowCheck = false;
        item.colCheck = false;
        item.processorType = null;
      });
      tableDataForBackup.value = res.data;
      loadRow();
      loadClear();
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};
loadPagination();

const clearArr = ref([]);
const loadClearArr = () => {
  getProcessorProperty(props.pageSet).then((res) => {
    clearArr.value = res.data;
  });
};
loadClearArr();

const loadRow = () => {
  securityFieldGetRowProperty(props.pageSet).then((res) => {
    tableDataForBackup.value.forEach((item: any) => {
      res.data.forEach((item2: any) => {
        if (item.name == item2.field) {
          item.rowCheck = true;
        }
      });
    });
    loadCol();
  });
};

const loadCol = () => {
  securityFieldGetColProperty(props.pageSet).then((res) => {
    tableDataForBackup.value.forEach((item: any) => {
      res.data.forEach((item2: any) => {
        if (item.name == item2.field) {
          item.colCheck = true;
        }
      });
    });
    tableData.value = tableDataForBackup.value;
    tableLoading.value = false;
  });
};

const loadClear = () => {
  getProcessorProperty(props.pageSet).then((res) => {
    tableDataForBackup.value.forEach((item: any) => {
      res.data.forEach((item2: any) => {
        if (item.name == item2.field) {
          item.processorType = item2.processorType;
        }
      });
    });
    tableData.value = tableDataForBackup.value;
  });
};

const rowCheckChange = () => {
  let arr = tableData.value
    .filter((item: any) => !!item.rowCheck)
    .map((item: any) => {
      return {
        field: item.name
      };
    });
  tableLoading.value = true;
  assignRowProperty({
    tableName: props.pageSet.tableName,
    properties: arr
  })
    .then((res) => {
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};

const colCheckChange = () => {
  let arr = tableData.value
    .filter((item: any) => !!item.colCheck)
    .map((item: any) => {
      return {
        field: item.name
      };
    });
  tableLoading.value = true;
  assignColProperty({
    tableName: props.pageSet.tableName,
    properties: arr
  })
    .then((res) => {
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};

const processorTypeChange = () => {
  let arr = tableData.value
    .filter((item: any) => !!item.processorType)
    .map((item: any) => {
      return {
        field: item.name,
        processorType: item.processorType
      };
    });
  tableLoading.value = true;
  assignProcessorProperty({
    tableName: props.pageSet.tableName,
    properties: arr
  })
    .then((res) => {
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};

const columns = [
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    customRender: function ({index}) {
      return index + 1;
    },
    width: 80
  },
  {
    title: "字段名",
    dataIndex: "name",
    align: "center"
  },
  {
    title: "字段描述",
    dataIndex: "remark",
    align: "center"
  },
  {
    title: "控制行",
    dataIndex: "row",
    align: "center"
  },
  {
    title: "控制列",
    dataIndex: "col",
    align: "center"
  },
  {
    title: "数据清洗",
    dataIndex: "clear",
    align: "center"
  }
];
</script>

<style scoped></style>
